<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>教室二维码生成</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="./js/xlsx.full.min.js"></script>

    <style type="text/css">
      .codeBox {
        text-align: center;
        /* border: 3px solid black; */
        /* overflow: hidden; */
        /* margin-bottom: 900px; */
      }
      .codeName {
        float: left;
        display: inline-block;
        text-align: center;
        margin: 8px;
      }
      .className {
        font-size: 20px;
      }
      img {
        width: 140px;
        height: 140px;
        border: 1px solid black;
      }
      p {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 10px;
      }
      .clearfix:after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
      }
      .clearfix {
        zoom: 1;
      }
      .text {
        margin-bottom: 60px;
      }
      textarea,
      .storeNo {
        display: inline-block;
      }
      #storeNo {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div style="height: 40px">
      <input type="file" name="xlfile" id="xlf" onchange="importf(this)" />
      <input type="checkbox" name="singleCheck" value="" / style="display:
      none;">
    </div>

    <div class="codeBox clearfix"></div>
  </body>
  <script type="text/javascript">
    /*
		FileReader共有4种读取方法：
		1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
		2.readAsBinaryString(file)：将文件读取为二进制字符串
		3.readAsDataURL(file)：将文件读取为Data URL
		4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
	*/
    var wb; //读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串

    function importf(obj) {
      //导入
      if (!obj.files) {
        return;
      }
      var f = obj.files[0];
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
          wb = XLSX.read(btoa(fixdata(data)), {
            //手动转化
            type: "base64",
          });
        } else {
          wb = XLSX.read(data, {
            type: "binary",
          });
        }
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据

        // document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
        var excalData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        //行数
        console.log(excalData);
        for (let i = 0; i < excalData.length; i++) {
          const element = excalData[i];
          /* 思路是先根据arr.length生成对应个数的html结构,再生成对应个数的二维码 */
          var html = `<div id='code${i}' class='codeName' >
								<p class='className'>${element.name}</p>
								<p>扫码查看实时考勤</p>
					          </div>`;
          $(".codeBox").prepend(html); //必须先生成html结构再生成二维码（顺序是重点）
          $("#code" + i).qrcode({
            width: 158,
            height: 158,
            text:
              "https://ykt.szpu.edu.cn/MdnWKKV667xvyZMD/index.html?ksbhid=" +
              element.bh,
          });
          // $(".codeBox").append(html);			<p>${element.name}</p>
        }
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    }

    function fixdata(data) {
      //文件流转BinaryString
      var o = "",
        l = 0,
        w = 10240;
      for (; l < data.byteLength / w; ++l)
        o += String.fromCharCode.apply(
          null,
          new Uint8Array(data.slice(l * w, l * w + w))
        );
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
      return o;
    }
  </script>
</html>
